<template>
	<div id="app">
		<div class="example">
			<h3>课程列表</h3>
			<div class="list-group">
				<a href="#" class="list-group-item" v-for="(course, index) in courseList" :key="index">
					<h4 class="list-group-item-heading">
						<img :src="course.src"/><!-- 动态显示课程图片 -->
					</h4>
					<p class="list-group-item-text text-muted">{{ course.description }}</p>
					<!--动态显示课程描述-->
				</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Index',
	components: {},
	data() {
		return {
			courseList: [
				{
					title: 'Vue课程',
					src: require('../assets/img/logos.png'),
					description: '一套构建用户界面的渐进式框架'
				},
				{
					title: 'JavaScript课程',
					src:require('../assets/img/js.jpg'),
					description: '是一种直译式脚本语言'
				},
				{
					title: 'HTML课程',
					src: require('../assets/img/html.jpg'),
					description: 'HTML5 是最新的 HTML 标准'
				}
			]
		};
	}
};
</script>
<style scoped></style>
